<script setup lang="ts">
import gsap from 'gsap'
// const iconNames = allIcons.map(v=>v.font_class)
// type IconNames = typeof iconNames[number];
import type { IconNames } from '@/types/base'
import { onMounted, watch, ref, nextTick } from 'vue'

const props = withDefaults(
  defineProps<{
    iconName: IconNames
    animated?: boolean
  }>(),
  {
    animated: true,
    iconName: 'icon_wushuju',
  },
)
defineExpose({
  name: 'MiniIcon',
})
const nowIconName = ref()

function startAnimation() {
  console.log('开始动画')
  switch (props.iconName) {
    case 'icon_yintian':
      gsap.fromTo(
        '.icon-container>.icon path:first-of-type',
        {
          opacity: 0.6,
          x: '-100%',
        },
        {
          duration: 5,
          strokeDashoffset: 0,
          // yoyo:true,
          x: '150%',
          repeat: -1,
          opacity: 1,
        },
      )
      break
    case 'icon_qingtian':
      gsap.to(
        '.icon-container>.icon path:nth-of-type(2)',
        {
          rotate: 360,
          transformOrigin: '50% 50%',
          repeat: -1,
          duration: 15,
          ease: 'linear',
        },
      )
      break
    case 'icon_baoxue':
      break
    case 'icon_baoyu':
      break
    case 'icon_daxue':
      break
    case 'icon_dayu':
      break
    case 'icon_duoyun':
      gsap.to(
        '.icon-container>.icon path:nth-of-type(2)',
        {
          rotate: 360,
          transformOrigin: '50% 50%',
          repeat: -1,
          duration: 10,
          ease: 'linear',
        },
      )
      break
    case 'icon_fuchen':
      break
    case 'icon_leizhenyu':
      break
    case 'icon_shachenbao':
      break
    case 'icon_wu':
      break
    case 'icon_wushuju':
      break
    case 'icon_xiaoxue':
      break
    case 'icon_xiaoyu':
      break
    case 'icon_yangsha':
      break
    case 'icon_yejianduoyun':
      gsap.to(
        '.icon path:nth-of-type(2)',
        {
          rotate: 360,
        },
      )
      break
    case 'icon_yejianqingtian':
      break
    case 'icon_yujiaxue':
      break
    case 'icon_yujiazuoyu':
      break
    case 'icon_yejianwu':
      break
    case 'icon_zhenxue':
      break
    case 'icon_zhenyu':
      break
    case 'icon_zhongxue':
      break
    case 'icon_zhongyu':
      break;
    default:
      break
  }
}
watch(
  () => props.animated,
  val => {
    if (val) {
      console.log('开始动画')
      //   开始图标动画
      startAnimation()
    }
  },
  {
    immediate: true,
  },
)

watch(
  () => props.iconName,
  val => {
    if (val) {
      const path = `../../icons/icon-${val}.svg`
      import(/* @vite-ignore */path).then(module => {
        nowIconName.value = module.default
        nextTick(()=> {
          startAnimation()
        })
      })
    }
  },
  {
    immediate: true,
  },
)
onMounted(() => {})
</script>

<template>
  <div class="icon-container" :class="{
    [iconName]:true
  }" v-html="nowIconName"></div>
</template>

<style scoped lang="scss"></style>
